<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" v-show="isShow" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="宽带渠道名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="findBroadShopPage">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd" v-show="isShow">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="downshops"  highlight-current-row v-loading="listLoading" border max-height="620"
                  style="width: 100%;">
            <el-table-column type="index" width="80" label="编号">
            </el-table-column>
            <el-table-column prop="user.useruuid" width="180px" label="分销商ID" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="user.username"  width="120px" label="分销商名称" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="user.userstatus" label="渠道状态" width="100px" :formatter="formatUserStatus" >
            </el-table-column>
            <!--<el-table-column prop="user.isOpen" label="渠道是否开启" width="100px" :formatter="formatUserIsOpen" >-->
            <!--</el-table-column>-->
            <!--<el-table-column prop="downshopnum"  width="100px" label="商家编号" show-overflow-tooltip>-->
            <!--</el-table-column>-->
            <el-table-column prop="user.phonenum" width="140px" label="商家账号" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="downshopbalance" width="135px" label="商户余额" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="credit" width="130px" label="授信额度">
            </el-table-column>
            <el-table-column prop="downshopip" width="255px"  v-if='isShowKey'  label="分销商IP" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="downkey" v-show="isShowKey" v-if='isShowKey'   width="180px"  label="分销商密匙" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="user.remark" v-show="isShow" label="备注" show-overflow-tooltip>
            </el-table-column>

            <el-table-column label="操作"  v-if='isShow'  v-show="isShow" fixed="right" width="400">
                <template scope="scope" v-show="isShow">
                <el-button size="small"   @click="handleEnable(scope.$index, scope.row)">
                {{scope.row.user.userstatus == '2' ? '渠道启用' :   '渠道维护'}}
                </el-button>
                <el-button size="small"   @click="handleEnableIsOpen(scope.$index, scope.row)">
                    {{scope.row.user.userstatus == '1' || scope.row.user.userstatus == '2'? '渠道关闭' : '渠道开启'}}
                </el-button>
                <el-button size="small" v-show="isShow" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <!--<el-button size="small" v-show="isShowKey" @click="updateKey(scope.$index, scope.row)">更新密匙-->
                <!--</el-button>-->
                <!--<el-button size="small" v-show="isShow" @click="rechargeEdit(scope.$index, scope.row)">充扣值-->
                <!--</el-button>-->
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="total,sizes,prev, pager, next"
            :total="total">
    </el-pagination>

    <!--编辑界面-->
        <el-dialog title="编辑分销商" v-model="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
                <el-form-item label="省份" prop="provinceuuid">
                    <el-select v-model="editForm.provinceuuid" filterable placeholder="请选择省份" @change="change"
                               style="width: 335px;">
                        <el-option
                                v-for="item in options"
                                :key="item.provinceuuid"
                                :label="item.provincename"
                                :value="item.provinceuuid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分销商名称" prop="username">
                    <el-input v-model="editForm.username" auto-complete="off"></el-input>
                </el-form-item>
                <!--<el-form-item label="商家编号" prop="downshopnum">-->
                    <!--<el-input v-model="editForm.downshopnum" auto-complete="off"></el-input>-->
                <!--</el-form-item>-->
                <el-form-item label="商家账号" prop="phonenum">
                    <el-input v-model="editForm.phonenum" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="授信额度" prop="credit">
                    <el-input v-model="editForm.credit" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="分销商IP" prop="downshopip">
                    <el-input v-model="editForm.downshopip" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="editForm.remark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>
        <!--新增界面-->
        <el-dialog title="新增分销商" v-model="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
                <el-form-item label="省份" prop="provinceuuid">
                    <el-select v-model="addForm.provinceuuid" filterable placeholder="请选择省份" @change="change"
                               style="width: 335px;">
                        <el-option
                                v-for="item in options"
                                :key="item.provinceuuid"
                                :label="item.provincename"
                                :value="item.provinceuuid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分销商名称" prop="username">
                    <el-input v-model="addForm.username" auto-complete="off"></el-input>
                </el-form-item>
                <!--<el-form-item label="商家编号" prop="downshopnum">-->
                    <!--<el-input v-model="addForm.downshopnum" auto-complete="off"></el-input>-->
                <!--</el-form-item>-->
                <el-form-item label="商家账号" prop="phonenum">
                    <el-input v-model="addForm.phonenum" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="password">
                    <el-input v-model="addForm.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="授信额度" prop="credit">
                    <el-input v-model="addForm.credit" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="分销商IP" prop="downshopip">
                    <el-input v-model="addForm.downshopip" auto-complete="off"></el-input>
                </el-form-item>
                <!--<el-form-item label="商户余额" prop="name">-->
                <!--<el-input v-model="addForm.downshopbalance" auto-complete="off"></el-input>-->
                <!--</el-form-item>-->
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="addForm.remark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>

        <el-dialog title="分销商充扣值" size="tiny" v-model="rechargeFormVisible" :close-on-click-modal="false">
            <el-form :model="rechargeForm" label-width="110px" ref="rechargeForm">

                <el-form-item label="剩余金额" prop="downshopbalance">
                    <el-input v-model="rechargeForm.downshopbalance" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="充扣值选项">
                    <el-radio-group v-model="rechargeForm.recharge">
                        <el-radio :label="1">充值</el-radio>
                        <el-radio :label="0">扣款</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="充扣值金额" prop="rechargeamount" :rules="[
				  { required: true, message: '不能为空'},
				  { type: 'number', message: '金额必须为数字值'}
				]">
                    <el-input type="rechargeamount" v-model.number="rechargeForm.rechargeamount" auto-complete="off"
                              @change="rechargeamountchange"></el-input>
                </el-form-item>
                <el-form-item label="总金额" prop="sumamount">
                    <el-input type="text" v-model="rechargeForm.sumamount" disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="rechargeForm.remark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="rechargeFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="rechargeSubmit" :loading="rechargeLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import util from '../../common/js/util'
    //import NProgress from 'nprogress'
    import {
        findBroadShopPage,
        addDownShop,
        findAllPro,
        findOneBroadShop,
        updateDownShop,
        updateDownShopKey,
        downRechargeRecord,
        handleEnableShop,
        handleEnableShopIsOpen
    } from '../../api/api';

    var crypto = require('crypto');
    export default {
        data() {
            return {
                filters: {
                    name: ''
                },
                downshops: [],
                total: 0,
                start: 0,
                pageSize: 10,
                listLoading: false,
                options: [],
                isShowKey: util.checkRoleSuper() ? true : false,
                isShow: util.checkRoleAdminAndSuper() ? true : false,
                editFormVisible: false,//编辑界面是否显示
                editLoading: false,
                editFormRules: {
                    username: [
                        {required: true, message: '请输入渠道商名称', trigger: 'blur'}
                    ],
//                    downshopnum: [
//                        {required: true, message: '请输入渠道商编号', trigger: 'blur'}
//                    ],
                    phonenum: [
                        {required: true, message: '请输入商家账号', trigger: 'blur'}
                    ],
                    downshopip: [
                        {required: true, message: '请输入渠道商IP', trigger: 'blur'}
                    ],
                    remark: [
                        {required: true, message: '请输入备注', trigger: 'blur'}
                    ],
                    provinceuuid: [
                        {required: true, message: '请选择省份', trigger: 'blur'}
                    ]
                },
                //编辑界面数据
                editForm: {
                    username: '',
                    downshopnum: '',
                    phonenum: '',
                    downshopip: '',
                    remark: '',
                    provinceuuid: '',
                    useruuid: '',
                    credit:'0.00'
                },

                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    username: [
                        {required: true, message: '请输入渠道商名称', trigger: 'blur'}
                    ],
//                    downshopnum: [
//                        {required: true, message: '请输入渠道商编号', trigger: 'blur'}
//                    ],
                    phonenum: [
                        {required: true, message: '请输入商家账号', trigger: 'blur'}
                    ], password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    downshopip: [
                        {required: true, message: '请输入渠道商IP', trigger: 'blur'}
                    ],
                    remark: [
                        {required: true, message: '请输入备注', trigger: 'blur'}
                    ],
                    provinceuuid: [
                        {required: true, message: '请选择省份', trigger: 'blur'}
                    ]
                },
                //新增界面数据
                addForm: {
                    username: '',
                    downshopnum: '',
                    phonenum: '',
                    downshopip: '',
                    remark: '',
                    password: '',
                    usertype: '5',
                    downshopbalance: '',
                    provinceuuid: '',
                    merchantcredit: 0,
                    credit:'0.00'
                },
                rechargeForm: {
                    downshopbalance: '',
                    rechargeamount: 0,
                    sumamount: '',
                    downshopuuid: '',
                    remark: '',
                    recharge: 1
                },
                rechargeFormVisible: false,
                rechargeLoading: false
            }
        },
        methods: {
            //性别显示转换
            change: function (option) {
                if (!option) {
                    let temp = this.editForm.provinceuuid;
                    this.editForm.provinceuuid = "";
                    this.editForm.provinceuuid = temp;
                }
            },
            formatUserStatus: function (row, column) {
                return row.user.userstatus === 1 ? '渠道正常' : row.user.userstatus === 2 ? '渠道维护' : row.user.userstatus === 3 ? '渠道关闭' :"其他";
            },
            formatUserIsOpen: function (row, column) {
                return row.user.isOpen === 1 ? '渠道开启' : row.user.isOpen === 0 ? '渠道关闭' : "其他";
            },
            rechargeEdit: function (index, row) {
                this.rechargeFormVisible = true;
                this.rechargeForm.downshopbalance = row.downshopbalance;
                this.rechargeForm.downshopuuid = row.downshopuuid;
            },
            rechargeamountchange: function () {
                try {
                    var reg = new RegExp("^([0-9]|[.][0-9])*$");
                    if (reg.test(this.rechargeForm.rechargeamount)) {
                        if (this.rechargeForm.recharge == 1) {
                            this.rechargeForm.sumamount = numAdd(this.rechargeForm.downshopbalance, this.rechargeForm.rechargeamount);
                        } else {
                            this.rechargeForm.sumamount = numSubtraction(this.rechargeForm.downshopbalance, this.rechargeForm.rechargeamount);
                        }
                    } else {
                        this.rechargeForm.rechargeamount = "";
                    }
                } catch (e) {
                    console.log(e);
                }
            },
            //充值
            rechargeSubmit: function () {
                this.$refs.rechargeForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.rechargeLoading = true;
                            let para = {
                                remark: this.rechargeForm.remark,
                                downshopuuid: this.rechargeForm.downshopuuid,
                                downshopbalance: this.rechargeForm.rechargeamount,
                                recharge: this.rechargeForm.recharge
                            };
                            downRechargeRecord(para).then((datas) => {
                                this.rechargeLoading = false;
                                let {message, code, data} = datas;
                                if (code !== "0") {
                                    this.$message({
                                        message: message,
                                        type: 'error'
                                    });
                                }
                                this.$refs['rechargeForm'].resetFields();
                                this.rechargeFormVisible = false;
                                this.findBroadShopPage();
                            });
                        });
                    }
                });
            },
            //获取用户列表
            findBroadShopPage() {
                let para = {
                    start: this.start,
                    pageSize: this.pageSize,
                    shopName: this.filters.name,
                    useruuid: util.getUserUUid()
                };
                this.listLoading = true;
                findBroadShopPage(para).then((datas) => {
                    let {message, code, data} = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        this.downshops = data.result;
                        this.total = data.totalCount;
                    }
                    this.listLoading = false;
                });
            },
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = {id: row.id};
                    removeUser(para).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.findBroadShopPage();
                    });
                }).catch(() => {
                });
            },
            updateKey: function (index, row) {
                this.$confirm('确认更新密匙吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    let para = {useruuid: row.user.useruuid};
                    updateDownShopKey(para).then(datas => {
                        let {message, code, data} = datas;
                        if (code !== "0") {
                            this.$message({
                                message: message,
                                type: 'error'
                            });
                        } else {
                            const h = this.$createElement;
                            this.$message({
                                message: h('p', null, [
                                    h('span', null, '密匙更新成功! '),
                                ])
                            });
                            this.findBroadShopPage();
                        }
                    });
                }).catch(() => {
                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.editFormVisible = true;
                let para = {test: ''};
                findAllPro(para).then(datas => {
                    let {message, code, data} = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        this.options = data;
                        let para = {useruuid: row.user.useruuid};
                        findOneBroadShop(para).then(datas => {
                            let {message, code, data} = datas;
                            if (code !== "0") {
                                this.$message({
                                    message: message,
                                    type: 'error'
                                });
                            } else {
                                this.editForm.username = data.user.username;
                                this.editForm.downshopnum = data.downshopnum;
                                this.editForm.phonenum = data.user.phonenum;
                                this.editForm.downshopip = data.downshopip;
                                this.editForm.remark = data.user.remark;
                                this.editForm.provinceuuid = data.provincialInformation.provinceuuid;
                                this.editForm.useruuid = data.user.useruuid;
                                this.editForm.credit = data.credit;
                            }
                        });
                    }
                });
            },
            //显示新增界面
            handleAdd: function () {
                this.addFormVisible = true;
                let para = {test: ''};
                findAllPro(para).then(datas => {
                    let {message, code, data} = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        this.options = data;
                    }
                });
            },
            //编辑
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            //NProgress.start();
                            let para = Object.assign({}, this.editForm);
                            updateDownShop(para).then((res) => {
                                this.editLoading = false;
                                let {message, code, data} = res;
                                if (code !== "0") {
                                    this.$message({
                                        message: message,
                                        type: 'error'
                                    });
                                } else {
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                }
                                this.$refs['editForm'].resetFields();
                                this.editFormVisible = false;
                                this.findBroadShopPage();
                            });
                        });
                    }
                });
            },
            //新增
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            let para = Object.assign({}, this.addForm);
                            var md5 = crypto.createHash('md5');
                            para.password = md5.update(para.password).digest('hex')
                            addDownShop(para).then((datas) => {
                                this.addLoading = false;
                                let {message, code, data} = datas;
                                if (code !== "0") {
                                    this.$message({
                                        message: message,
                                        type: 'error'
                                    });
                                }
                                this.$refs['addForm'].resetFields();
                                this.addFormVisible = false;
                                this.findBroadShopPage();
                            });
                        });
                    }
                });
            }, handleEnable: function (index, row) {
                this.$confirm('确认维护or启用该商家状态吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = {
                        userstatus: row.user.userstatus == "2" ? "1" : "2",
                        useruuid: row.user.useruuid
                    };
                    handleEnableShop(para).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        let {message, code, data} = res;
                        if (code !== "0") {
                            this.$message({
                                message: message,
                                type: 'error'
                            });
                        }
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.findBroadShopPage();
                    });
                }).catch(() => {
                });
            },
            handleEnableIsOpen:function (index, row) {
                this.$confirm('确认关闭or启用该商家状态吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = {
                        userstatus: row.user.userstatus == "3" ? "1" : "3",
                        useruuid: row.user.useruuid
                    };
                    handleEnableShop(para).then((res) => {
                        this.listLoading = false;
                        //NProgress.done();
                        let {message, code, data} = res;
                        if (code !== "0") {
                            this.$message({
                                message: message,
                                type: 'error'
                            });
                        }
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.findBroadShopPage();
                    });
                }).catch(() => {
                });
            },
            handleCurrentChange: function (val) {
                this.start = val - 1;
                this.findBroadShopPage();
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.findBroadShopPage();
            }
        }, mounted() {
            this.findBroadShopPage();
        }
    }

    function numAdd(num1, num2) {
        var baseNum, baseNum1, baseNum2;
        try {
            baseNum1 = num1.toString().split(".")[1].length;
        } catch (e) {
            baseNum1 = 0;
        }
        try {
            baseNum2 = num2.toString().split(".")[1].length;
        } catch (e) {
            baseNum2 = 0;
        }
        baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
        return (num1 * baseNum + num2 * baseNum) / baseNum;
    }

    function numSubtraction(num1, num2) {
        var baseNum, baseNum1, baseNum2;
        try {
            baseNum1 = num1.toString().split(".")[1].length;
        } catch (e) {
            baseNum1 = 0;
        }
        try {
            baseNum2 = num2.toString().split(".")[1].length;
        } catch (e) {
            baseNum2 = 0;
        }
        baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
        return (num1 * baseNum - num2 * baseNum) / baseNum;
    }
</script>

<style scoped>

</style>
